<template>
  <el-collapse-transition>
    <el-form ref="searchFormRef" :model="form" label-width="120px" v-show="visible">
      <el-row>
        <el-col :sm="6">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formModel.username" placeholder="用户名" clearable />
          </el-form-item>
        </el-col>
        <el-col :sm="6">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formModel.email" placeholder="邮箱" clearable />
          </el-form-item>
        </el-col>
        <el-col :sm="6">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="formModel.mobile" placeholder="手机号" clearable />
          </el-form-item>
        </el-col>
        <el-col :sm="6">
          <el-form-item label="状态" prop="status">
            <el-select v-model="formModel.status" placeholder="选择状态" clearable>
              <el-option :label="text" :value="value" v-for="(text, value) of optionsOfStatus" :key="value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12" class="d-flex">
          <el-form-item label="登陆时间" prop="login_time">
            <el-date-picker v-model="formModel.login_time" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" class="d-flex">
          <el-form-item label="注册时间" prop="created_at">
            <el-date-picker v-model="formModel.created_at" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
          </el-form-item>
        </el-col>
        <el-col :sm="6">
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="onReset()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-collapse-transition>
</template>

<script setup>
/**
 * 管理员搜索面板组件
 */
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';

// ======================================================
//                      变量声明
// ======================================================

// props
const props = defineProps({ visible: Boolean })
// emit
const emit = defineEmits(['search'])
// 表单组件引用实例
const searchFormRef = ref(null);
// 状态选项数据
const optionsOfStatus = ref({});
// 表单数据
const formModel = ref({
  username: '',
  email: '',
  mobile: '',
  status: '',
  login_time: '',
  created_at: '',
})

// ======================================================
//                     点击操作
// ======================================================

// 点击搜索按钮
const onSubmit = () => {
  console.log('[搜索面板] onSubmit form = ', formModel.value)
  emit('search', formModel.value);
}

// 点击重置按钮
const onReset = () => {
  searchFormRef.value.resetFields();
}

// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const loadData = () => {
  EsAjax.get(ApiUrls.authAdminOption).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data+res.data.msg);
      return;
    }
    optionsOfStatus.value = res.data.data.options_of_status;
  }).catch(err => { ElMessage.error('网络错误：' + err.message) })
}

// 执行事件
loadData();

</script>
